<template>
  <Category :btnNumber="btnNumber"></Category>
  <el-card style="margin: 10px 0">
    <div v-show="changeComponents == 0">
      <el-button
        size="large"
        type="primary"
        :icon="Plus"
        :disabled="useProductCategoryStore.c3Id ? false : true"
        @click="addSPUbtn"
        >添加SPU</el-button
      >
      <el-table
        v-if="spuList.length"
        border
        style="margin: 20px 0"
        :data="spuList"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
          :width="100"
        ></el-table-column>
        <el-table-column
          prop="spuName"
          label="SPU名称"
          align="center"
          :min-width="20"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="description"
          label="SPU描述"
          min-width="40%"
          align="center"
        ></el-table-column>
        <el-table-column min-width="30%" label="SPU操作">
          <template #="{ row }">
            <el-button
              :disabled="useProductCategoryStore.c3Id ? false : true"
              type="primary"
              @click="addSKUbtn(row)"
              title="添加SKU"
              :icon="Plus"
              circle
            ></el-button>
            <el-button
              type="info"
              @click="lookSKUFun(row)"
              title="查看SKU列表"
              :icon="InfoFilled"
              circle
            />
            <el-button
              @click="updateSPUbtn(row)"
              type="warning"
              title="修改SPU"
              :icon="Edit"
              circle
            />
            <el-button
              type="danger"
              :icon="Delete"
              @click="delSPUFun(row.id)"
              title="删除SPU"
              circle
            />
          </template>
        </el-table-column>
      </el-table>
      <el-divider v-else content-position="center"
        ><span style="color: #5a9cf8">暂无数据 敬请期待</span></el-divider
      >
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="getSUPDataAPI"
        v-model:current-page="pageOne"
        v-model:page-size="pageSize"
        :page-sizes="[3, 6, 9, 12]"
        background
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="total"
      />
    </div>
    <SpuView
      ref="SpuBase"
      @update-scene="sceneChange"
      v-show="changeComponents == 1"
    ></SpuView>
    <SkuView
      @SKUPagescene2="SKUPagescene2Emit"
      ref="SkuViewRef"
      v-show="changeComponents == 2"
    ></SkuView>
    <!-- 产看SKU Dialog组件 -->
    <el-dialog v-model="isShowSKU" title="查看SKU" width="600">
      <el-table v-loading="loadingShow" :data="gettedSKUList">
        <el-table-column label="SKU名称" prop="skuName"></el-table-column>
        <el-table-column label="SKU价格" prop="price"></el-table-column>
        <el-table-column label="SKU重量" prop="weight"></el-table-column>
        <el-table-column label="SKU图片">
          <template #="{ row }">
            <img
              :src="row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { Plus, Edit, InfoFilled, Delete } from "@element-plus/icons-vue";
//获取select分类仓库
import productCategoryStore from "@/stores/category";
import { getSPUData, lookSKUListAPI, delSPUAPI } from "@/api/product/spu";
import type { Spu, Records, SpuListObjectType } from "@/api/product/type/spu";
import SpuView from "@/views/product/spu/components/spu.vue";
import SkuView from "@/views/product/spu/components/sku.vue";
import { ElMessage, messageConfig } from "element-plus";
//三个select是否禁用
const btnNumber = ref<number>(0);
//切换组件的变量,0-主页，1-添加or修改spu，2-添加sku
const changeComponents = ref<number>(0);
//当前页
const pageOne = ref<number>(1);
//当前页容量数
const pageSize = ref<number>(3);
//取到select仓库函数
const useProductCategoryStore = productCategoryStore();
//监听三级分类select变换，发送请求接口
//SPU属性数据数组
const spuList = ref<Records>([]);
//总数据量
const total = ref<number>(0);
//查看商品SKUdialog蒙层
const loadingShow = ref<boolean>(true);
//SPU组件实例
const SpuBase = ref<any>();
watch(
  () => useProductCategoryStore.c3Id,
  () => {
    //数据变化就清空数字不让她再显示老数据了
    spuList.value = [];
    //发送请求
    //避免监听到三级分类select清空的变化发送了请求
    useProductCategoryStore.c3Id && getSUPDataAPI();
  }
);
//获取SPU接口数据的函数
const getSUPDataAPI = async (value = 1) => {
  //接收当前页变化的参数，重新赋值，默认值是1
  pageOne.value = value;
  const res: SpuListObjectType = await getSPUData(
    pageOne.value,
    pageSize.value,
    useProductCategoryStore.c3Id as number
  );
  //存储主页面需要展示的数据
  spuList.value = res.records;
  total.value = res.total;
};
//分页器每页数据数量变化触发
const pageSizeChange = (newSize: number) => {
  pageSize.value = newSize;
  getSUPDataAPI();
};
//添加SKU按钮函数,,//添加sku按钮，给子组件传递信息，子组件调用接口获取数据
const SkuViewRef = ref();
const addSKUbtn = (row: any) => {
  changeComponents.value = 2;
  SkuViewRef.value.getBaseData(
    useProductCategoryStore.c1Id,
    useProductCategoryStore.c2Id,
    row
  );
};
//修改SPU按钮函数
const updateSPUbtn = (row: Spu) => {
  //修改控制场景的属性，代表去了添加or修改SPU页
  changeComponents.value = 1;
  //调用子组件方法，为了把数据存在子组件
  SpuBase.value.getAPI(row);
};
//添加SPU按钮函数
const addSPUbtn = () => {
  //修改控制场景的属性，代表去了添加or修改SPU页
  changeComponents.value = 1;
  //调用子组件方法，为了把数据存在子组件
  //传一下三级分类ID
  SpuBase.value.getaddSPUTParamsFun(useProductCategoryStore.c3Id);
};
//场景变换函数->接收来自场景1的参数
const sceneChange = (params: any) => {
  changeComponents.value = params.val;
  //判断是子组件的保存还是取消按钮，取消按钮就不重新获取数据了
  if (!params.isNobtn) {
    //添加情况
    if (params.flag == "添加") {
      //重新拉去一下数据
      //不传默认是1，上面写的
      getSUPDataAPI();
    } else {
      //重新拉去一下数据
      //传入当前页
      getSUPDataAPI(pageOne.value);
    }
  } else {
    return;
  }
};
//接收SKU组件的事件传递场景变换
const SKUPagescene2Emit = (scene: number) => {
  changeComponents.value = scene;
};
//控制查看SKU的Dialog组件的显示隐藏
const isShowSKU = ref<boolean>(false);
//存储的到的SKU商品列表数据
const gettedSKUList = ref<any>([]);
//查看SKU详情按钮
const lookSKUFun = async (row: any) => {
  isShowSKU.value = true;
  const res = await lookSKUListAPI(row.id);
  gettedSKUList.value = res;
  loadingShow.value = false;
};
//删除SPU按钮
const delSPUFun = async (id: any) => {
  await delSPUAPI(id);
  getSUPDataAPI();
  ElMessage({
    type: "success",
    message: "删除成功",
  });
};
</script>

<style scoped></style>
